<template>
  <div class="fastener-container">
    <el-tooltip
      v-for="(button, index) in buttonArr"
      :key="index"
      class="item"
      effect="dark"
      :content="button.text"
      placement="top-start"
    >
      <i class="iconfont" :class="button.icon" @click="button.click" />
    </el-tooltip>
  </div>
</template>

<script>
import '@/assets/css/iconfont.css'
export default {
  props: {},
  data() {
    return {
      buttonArr: [
        {
          icon: 'icon-reset-local',
          text: '初始视图',
          click: this.restView
        }
      ]
    }
  },
  methods: {
    restView() {
      this.$emit('resetView')
    }
  }
}
</script>

<style lang="scss" scoped>
.fastener-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px; /* 元素间距 */
  .item {
    flex: 0 0 calc(33.33% - 20px * 2 / 3); /* 不伸缩，基础宽度计算 */
  }
  .iconfont {
    cursor: pointer;
    font-size: 24px;
    margin-top: 10px;
  }
}
</style>
